#pageHome{
    background: #f3f6fb;
    width: calc(~"100% - 200px");
    padding: 25px 40px;
    .home-content{
        width: 100%;
        position: relative;
        .home-comtent-top{
            display: flex;
            height: 40px;
            margin-bottom: 25px;
            .home-comtent-top-title{
                color: #000;
                font-size: 18px;
                font-family: SimHei;
            }
            .el-select{
                position: absolute;
                right: 0px;
                .el-input__inner{
                    width: 300px;
                    border-color: #d6e5fa;
                    background-color: #fff;
                    color: #333;
                    font-size: 14px;
                }
            }
            
        }
        .home-content-box{
            background-color: #fff;
            border-radius: 6px;
            box-shadow: 0px 0px 5px #ddd;
            .el-tabs__header{
                margin: 0;
            }
            .el-tabs__active-bar{
                width: 160px!important;
                height: 4px;
                background-color: #1e5ee3;
            }
            .el-tabs__item{
                height: 60px;
                line-height: 60px;
                width: 160px;
                padding: 0px;
                font-size: 16px;
                text-align: center;
            }
            .el-tabs__nav-wrap::after{
                background-color:#eaf2ff;
            }
            .el-tabs__item.is-active,.el-tabs__item:hover{
                color: #1e5ee3;
            }
            
        }
        
    }
}

#chartToday, #chartSeven{
    .chart-boxs{
        height: 374px;
        border-bottom: 1px solid #e9f3ff;
        padding: 35px 75px 10px 75px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        position: relative;
        .chart-box-title{
            font-size: 18px;
            color: #000;
            width: 100%;
            height: 40px;
            text-align: left;
            position: absolute;
        }
        .chart-box{
            width: 100%;
            height: 300px;
        }
        .visualMap{
            position: absolute;
            z-index: 999;
            left: 50px;
            bottom: 30px;
            height: 100px;
            width: 24px;
            border-radius: 20px;
            background-image: linear-gradient(to bottom, #4b9efe , #4dc7fa, #36d8a9);
            span{
                color: #fff;
                font-size: 14px;
                position: absolute;
                left: 4px;
            }
            span.visualMap_top{
                top: 6px;
            }
            span.visualMap_bottom{
                bottom: 6px;
            }
        }
        #map-chart{
            width: 70%;
        }
        #area-chart{
            width: 29%;
            border: 1px solid #e9f3ff;
            overflow: auto;
            height: 270px;
            ul.area-ul{
                width: 100%;
                margin: 0px;
                padding: 0;
                list-style: none;
                padding: 10px 0px;
                li{
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    position: relative;
                    span.area-name{
                        font-size: 14px;
                        float: left;
                        padding-left: 20px;
                    }
                    span.area-data{
                        font-size: 14px;
                        float: right;
                        padding-right: 20px;
                    }
                    span.area-progress{
                        float: left;
                        display: inline-block;
                        height: 4px;
                        margin-left: 15px;
                        width: calc(~"100% - 140px");
                        background-color: #fff;
                        position: relative;
                        top: 15px;
                        .area-rate{
                            display: inline-block;
                            height: 4px;
                            border-radius: 4px;
                            background-color: #4fc7fc;
                            position: absolute;
                            top: 0;
                            left: 0;
                        }
                    }
                }
                li:hover{
                    cursor: pointer;
                    color: #00b1ff;
                }
            }

        }
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/  
        ::-webkit-scrollbar  
        {  
            width: 6px;  
            // height: 110px;
            background-color: #fff;  
        }  
        /*定义滚动条轨道 内阴影+圆角*/  
        ::-webkit-scrollbar-track  
        { 
            border-radius: 10px;  
            background-color: #fff;  
        }    
        /*定义滑块 内阴影+圆角*/  
        ::-webkit-scrollbar-thumb  
        {  
            border-radius: 10px; 
            background-color: #d6e5fa;  
        }  
        /*滑块效果*/
        ::-webkit-scrollbar-thumb:hover
        {
        border-radius: 5px;
        background: rgba(0,0,0,0.4);
        }

    }
}